<template class="task-template">
  <section id="app-sys-information-section" class="section js-section u-category-system">
    <header class="section-header">
      <div class="section-wrapper">
        <h1>
          <svg class="section-icon"><use xlink:href="assets/img/icons.svg#icon-system"></use></svg>
          获取 APP 和系统信息
        </h1>
        <h3>通过使用 Node.js 和 Electron 的部分模块，可以显示出用户系统信息，APP 信息以及窗口信息.</h3>
        <p>下边 🌰 里给出了对应在线文档的地址</p>
      </div>
    </header>

    <div class="demo">
      <div class="demo-wrapper">
        <button id="app-info-demo-toggle" class="js-container-target demo-toggle-button">获取 APP 信息
          <div class="demo-meta u-avoid-clicks">支持系统: Win, OS X, Linux <span class="demo-meta-divider">|</span> 进程: Both</div>
        </button>
        <div class="demo-box">
          <div class="demo-controls">
            <button class="demo-button" id="app-info">点我看效果</button>
            <span class="demo-response" id="got-app-info"></span>
          </div>
          <p>主进程的<code>app</code>模块可以查看 APP 的安装路径.</p>
          <p>在 🌰 中，通过 <code>ipc</code>模块从渲染进程向主进程请求 APP 信息，这里是安装路径</p>
          <p>详情查看 <a href="http://electron.atom.io/docs/api/app">APP 模块<span class="u-visible-to-screen-reader">(在线文档)</span></a></p>
          <h5>渲染进程</h5>
          <pre><code data-path="renderer-process/system/app-information.js"></pre></code>
          <h5>主进程</h5>
          <pre><code data-path="main-process/system/app-information.js"></pre></code>
        </div>
      </div>
    </div>

    <div class="demo">
      <div class="demo-wrapper">
        <button id="app-info-demo-toggle" class="js-container-target demo-toggle-button">获取 APP 版本信息
          <div class="demo-meta u-avoid-clicks">支持: Win, OS X, Linux <span class="demo-meta-divider">|</span> 进程: Both</div>
        </button>
        <div class="demo-box">
          <div class="demo-controls">
            <button class="demo-button" id="version-info">点我看效果</button>
            <span class="demo-response" id="got-version-info"></span>
          </div>
          <p> <code>process</code> 模块是Node.js内置模块(因此你可以在两个进程中都可以调起这个模块)， Electron 中对这个模块进行了拓展，增加了一些其他的特性</p>
          <p>🌰 中展示了 APP 所使用的 Electron 的版本</p>
          <p>详情查看 <a href="http://electron.atom.io/docs/api/process">process模块<span class="u-visible-to-screen-reader">(在线文档)</span></a></p>
          <h5>渲染进程</h5>
          <pre><code data-path="renderer-process/system/version-information.js"></pre></code>

          <div class="demo-protip">
            <h2>友情提示</h2>
            <strong>查看 Chromium, Node.js 以及 V8的版本.</strong>
            <p>Electron 也提供了 Chromium, Node.js 以及 V8 的版本信息(<code>process.versions</code> ). 最快的查看方式还是在 Dev-tools里输入<code>process.versions</code>进行查看</p>
            <pre><code class="language-js">// Returns version of Chromium in use
process.versions.chrome
// Returns version of V8 in use
process.versions.v8
// Returns version of Node in use
process.versions.node</code></pre>
          </div>
        </div>
      </div>
    </div>

    <div class="demo">
      <div class="demo-wrapper">
        <button id="sys-info-demo-toggle" class="js-container-target demo-toggle-button">获取系统信息
          <div class="demo-meta u-avoid-clicks">支持: Win, OS X, Linux <span class="demo-meta-divider">|</span> 进程: Both</div>
        </button>
        <div class="demo-box">
          <div class="demo-controls">
            <button class="demo-button" id="sys-info">点我看效果</button>
            <span class="demo-response" id="got-sys-info"></span>
          </div>
          <p> Node.js 提供的<code>os</code> 模块提供了用户操作系统的信息，由于是 Node.js 内置，所以两个进程都能使用</p>
          <p> 🌰 中调用这个模块并返回了用户主目录地址</p>

          <p>详情查看<a href="https://nodejs.org/api/os.html"> os 模块<span class="u-visible-to-screen-reader">(在线文档)</span></a> </p>
          <h5>渲染进程</h5>
          <pre><code data-path="renderer-process/system/sys-information.js"></pre></code>
        </div>
      </div>
    </div>

    <div class="demo">
      <div class="demo-wrapper">
        <button id="screen-info-demo-toggle" class="js-container-target demo-toggle-button">获取窗口信息
          <div class="demo-meta u-avoid-clicks">支持系统: Win, OS X, Linux <span class="demo-meta-divider">|</span> 进程: Both</div>
        </button>
        <div class="demo-box">
          <div class="demo-controls">
            <button class="demo-button" id="screen-info">点我看效果</button>
            <span class="demo-response" id="got-screen-info"></span>
          </div>
          <p>Electron <code>screen</code> 模块包含了窗口尺寸，显示方式，位置等信息，🌰 中获取了窗口的朝向</p>

          <p>详情查看<a href="http://electron.atom.io/docs/api/screen">screen 模块<span class="u-visible-to-screen-reader">(在线文档)</span></a> </p>
          <h5>渲染进程</h5>
          <pre><code data-path="renderer-process/system/screen-information.js"></pre></code>

          <div class="demo-protip">
            <h2>友情提示</h2>
            <strong>不同朝向的区别.</strong>
            <p>screen 的<code>.size</code> 方法实现的翻转会由于你的屏幕问题无法看到翻转效果</p>

            <p>如果生产环境中有这个需求，需要首先监测 <code>.workAreaSize</code> 方法. 这个方法会返回能够翻转的屏幕尺寸</p>
          </div>
        </div>
      </div>
    </div>

    <script type="text/javascript">
      require('./renderer-process/system/app-information')
      require('./renderer-process/system/version-information')
      require('./renderer-process/system/sys-information')
      require('./renderer-process/system/screen-information')
    </script>

  </section>
</template>
